{% set fsf_step = "push" %}
{% extends "first-snap/_layout_fsf.html" %}

{% block fsf_content %}
  <div class="p-strip is-shallow u-no-padding--top">
    <div class="row">
      <h4>Before you publish your snap, you'll need an Ubuntu One account</h4>
      <p>Gain access to a host of great features within snapcraft.io such as your very own store listing page, publisher dashboard and snap usage metrics.</p>
    </div>

    <div class="row">
      <div class="col-4 col-small-1 col-medium-2">
        <img height="193" width="308" src="https://assets.ubuntu.com/v1/e3eacb56-fsf-publisher-listing.png" />
      </div>
      <div class="col-4 col-small-1 col-medium-2">
        <img height="193" width="308" src="https://assets.ubuntu.com/v1/3220411b-fsf-publisher-dashboard.png" />
      </div>
      <div class="col-4 col-small-1 col-medium-2">
        <img height="193" width="308" src="https://assets.ubuntu.com/v1/55c5070e-fsf-publisher-metrics.png" />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="p-accordion" role="tablist" aria-multiselect="true">
      <ol class="p-accordion__list">
        <li class="p-accordion__group">
          <button {% if user %}disabled aria-expanded="false"{% else %}aria-expanded="true"{% endif %} type="button" class="p-accordion__tab" id="tab1" role="tab" aria-controls="#tab1-section" >
            <h4 class="u-no-margin--bottom">
              Step 1: Create an Ubuntu One account
              {% if user %}<i class="p-icon--success"></i>{% endif %}
            </h4>
          </button>
          <section class="p-accordion__panel" id="tab1-section" role="tabpanel" {% if user %}aria-hidden="true"{% else %}aria-hidden="false"{% endif %} aria-labelledby="tab1-section">
            <div class="p-strip is-shallow">
              <div class="row">
                <div class="col-8">
                  <p>This lets you make releases, alter your store listing and see usage metrics.</p>
                  <div class="row">
                    <p class="col-5">
                      <img src="https://assets.ubuntu.com/v1/cd588a80-ubuntu-one.png" />
                    </p>
                  </div>
                  <a href="/login" class="p-button--positive p-link--external">Register / Sign in...</a>
                </div>
              </div>
            </div>
          </section>
        </li>
        <li class="p-accordion__group">
          <button {% if not user %}disabled aria-expanded="false"{% else %}aria-expanded="true"{% endif %} type="button" class="p-accordion__tab" id="tab2" role="tab" aria-controls="#tab2-section" aria-expanded="false">
            <h4 class="u-no-margin--bottom">
              Step 2: Register your snap name
              <i id="register-name-success" class="p-icon--success u-hide"></i>
            </h4>
          </button>
          <section class="p-accordion__panel" id="tab2-section" role="tabpanel" {% if not user %}aria-hidden="true"{% else %}aria-hidden="false"{% endif %} aria-labelledby="tab2-section">
            <div class="p-strip is-shallow">
              <div class="row">
                <div class="col-8">
                  <form id="register-name-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <label>You must register snap name to be able to push your snap to the store.</label>
                    <div class="p-form-validation">
                      <input class="p-form-validation__input" type="text" name="snap-name" value="{{ snap_name }}" />
                      <p class="p-form-validation__message" id="input-error-message-inline" role="alert">
                        Name should only have lowercase letters, numbers, and hyphens, must have at least one letter, and cannot start or end with a hyphen.
                      </p>
                    </div>
                    <div id="register-name-notification" class="p-notification--caution u-hide">
                      <p class="p-notification__response">
                        <span class="p-notification__status"></span>
                        Make sure the name matches what has been used previously (i.e <code>{{ snap_name }}</code>)
                      </p>
                    </div>
                    <button class="p-button--positive">Register snap name</button>
                  </form>
                </div>
              </div>
            </div>
          </section>
        </li>
        <li class="p-accordion__group">
          <button {% if not user %}disabled{% endif %} type="button" class="p-accordion__tab" id="tab3" role="tab" aria-controls="#tab3-section" aria-expanded="false">
            <h4 class="u-no-margin--bottom">
              Step 3: Push to the Snap store
            </h4>
          </button>
          <section class="p-accordion__panel" id="tab3-section" role="tabpanel" aria-hidden="true" aria-labelledby="tab3-section">
            <div class="p-strip is-shallow">
              <div class="row">
                <div class="col-8">
                  <p>Log in to snapcraft using your Ubuntu One account credentials:</p>
                  {% set snippet_value = "snapcraft login" %}
                  {% set snippet_id = "snapcraft-login" %}
                  {% include "/partials/_code-snippet.html" %}

                  <p>
                    Once logged, you can push your snap to the store with following command:
                  </p>
                  {% set snippet_value = "snapcraft push --release edge *.snap" %}
                  {% set snippet_id = "snapcraft-push" %}
                  {% include "/partials/_code-snippet.html" %}

                  <p>
                    Once you've pushed to the Snap store, edit your snap public presentation.
                  </p>
                  <a class="p-button--neutral js-continue is--disabled">
                    <i class="p-icon--spinner u-animation--spin"></i>
                    &nbsp;Waiting for push...</a>
                </div>
              </div>
            </div>
          </section>
        </li>
      </ol>
    </div>
  </div>
{% endblock %}

{% block fsf_pagination %}
  {% if os and os.startswith('macos') %}
    <a class="p-button--neutral" href="/first-snap/{{ language }}/{{ os }}/test" aria-label="Previous: Test snap">
      &lsaquo; Test snap
    </a>
  {% else %}
    <a class="p-button--neutral" href="/first-snap/{{ language }}/{{ os }}/build" aria-label="Previous: Build snap">
      &lsaquo; Build snap
    </a>
  {% endif %}

  <a class="p-button--positive is--disabled u-float-right" id="js-pagination-next" aria-label="Next: Go to listing">
    Go to listing &rsaquo;
  </a>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function() {
        {% if user %}
          snapcraft.public.firstSnapFlow.initRegisterName(
            document.getElementById("register-name-form"),
            document.getElementById("register-name-notification"),
            document.getElementById("register-name-success")
          );
          snapcraft.public.firstSnapFlow.push({{ language|tojson }});
        {% endif %}
        snapcraft.public.initAccordion('.p-accordion__list');
      });
    });
  </script>
  {{ super() }}
{% endblock %}
